<template>
	<view class="page">
		<view style="background-color: #fff;width: 100%;">
			<view style="background-color: #fff;width: 100%;">
				<view class="phonenumber">
					<span class="sp_1">姓名<span class="sp_2">*</span> </span>
					<input type="text" v-model="this.name" class="inp_1" placeholder="请输入姓名">
				</view>
				<view class="phonenumber">
					<span class="sp_1">手机号 <span class="sp_2">*</span> </span>
					<input class="inp_1" type="number" v-model="this.phone"  placeholder="请输入手机号" />
				</view>

				<view class="phonenumber">
					<span class="sp_1">性别 <span class="sp_2">*</span> </span>
					<view class="select">
						<uni-data-select v-model="value" :localdata="range" @change="change"
							placeholder="选择性别"></uni-data-select>
					</view>
				</view>
				<view class="phonenumber">
					<span class="sp_1">年龄<span class="sp_2">*</span> </span>
					<input type="number" v-model="this.age" class="inp_1" placeholder="请输入年龄">
				</view>
				<view class="phonenumber">
					<span class="sp_1">当前地址<span class="sp_2">*</span> </span>
					<input type="text" v-model="this.Address" class="inp_1" placeholder="请输入地址">
				</view>

				<button class="bt_1" style="width: 50%;" @click="baocun">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		CreateUser,DisposeUserrelationship
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				name: '',
				phone: '',
				age: '',
				Address: '',
				value: '',
				range: [{
						value: "男",
						text: "男"
					},
					{
						value: "女",
						text: "女"
					},
				],
			}
		},
		onLoad() {
			this.phone = this.$store.state.xingban_user
		},
		methods: {


			baocun() {
				console.log(this.value);
				if(this.phone!=''&&this.Address!=''&&this.age!=''&&this.value!=''&&this.name!=''){
					CreateUser({
					 Phone:this.phone,
					 Address:this.Address,
					 Age: this.age,
					  Sex: this.value,
					  Name:this.name,
					  Account:'jkdaUser'
					}).then(res=>{
						console.log(res);
						if(res.Code===200){
							let data1 = this.$store.state.vx_uid
							let data2 = '性伴'
							let data3 = this.phone
							
							DisposeUserrelationship(
								data1, data2, data3
							).then(res => {
								console.log(res);
								if(res.Code===200){
							
									uni.showModal({
										content: '绑定成功。',
										showCancel: false,
										success(res) {
											if (res.confirm) {
												uni.navigateTo({
													url:'../XBGL_01/XBGL_01'
												})
											}
										}
									})
								}	
							}).catch( res=> {
								console.log(res);
							})
						}
					})
				}else{
					uni.showToast({
						title: `请填写完整信息`,
						icon: 'error',
						duration: 2000
					})
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: auto;

		.bt_1 {
			width: 622rpx;
			height: 98rpx;
			background: #1677FF;
			margin: 200rpx auto 20rpx;
			font-size: 36rpx;
			font-family: Source Sans Pro, Source Sans Pro;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 98rpx;
		}

		.phonenumber {
			width: 686rpx;
			height: 112rpx;
			border-bottom: 1rpx solid #E7E7E7;
			margin-left: 32rpx;

			.sp_1 {
				display: inline-block;
				margin-top: 32rpx;
				font-weight: 400;
				width: 200rpx;
				height: 48rpx;
				float: left;
				font-size: 32rpx;
				line-height: 48rpx;

				.sp_2 {
					color: red;
				}
			}

			.inp_1 {
				float: left;
				height: 70rpx;
				margin-top: 20rpx;
				border-radius: 10rpx;
				padding-left: 10rpx;
				border: 1rpx solid #e5e5e5;
			}

			.select {
				width: 350rpx;
				float: left;
				margin-top: 25rpx;
			}

		}
	}
</style>